<template>
  <div>
    <el-input
      v-model="search"
      prefix-icon="el-icon-search"
      style="width: 350px"
      placeholder="输入用户名搜索"/>
    <el-table
      :data="walletData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%;margin-top: 15px">
      <el-table-column
        label="序号" width="50px">
        <template v-slot="scope">
          <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="日期"
        prop="date">
      </el-table-column>
      <el-table-column
        label="用户名称"
        prop="username">
      </el-table-column>
      <el-table-column label="变动信息">
        <el-table-column
          label="变动前金额"
          prop="before">
        </el-table-column>
        <el-table-column
          label="变动后金额"
          prop="after">
        </el-table-column>
        <el-table-column
         label="数额"
         prop="number">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="100"
          :filters="[{ text: '充值', value: '充值' }, { text: '提现', value: '提现' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template v-slot="scope">
            <el-tag
              :type="scope.row.type === '充值' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.type}}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="pagination" style="margin-top:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, sizes, pager, next,jumper"
        :current-page.sync="pageParams.pageNum"
        :page-size="pageParams.pageSize"
        :page-sizes="[10,20,50,100]"
        :total="walletData.length">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  name: "walletShow",
  data(){
    return{
      walletData:[
        {
          date:'2020-02-02',
          username:'王先生',
          before:90,
          type:'充值',
          number:10,
          after:100
        },
        {
          date:'2020-02-02',
          username:'李先生',
          before:90,
          type:'提现',
          number:10,
          after: 80
        },
        {
          date:'2020-02-02',
          username:'张先生',
          before:100,
          type:'充值',
          number:10,
          after:110
        }
      ],
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      search:''
    }
  },
  methods:{
    filterTag(value, row) {
      return row.type === value;
    },
    handleSizeChange(val) {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = val;
    },

    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
    }
  }
}
</script>

<style scoped>

</style>
